<template>
  <el-row class="home" :gutter="20">
    <el-col class="left" :span="8" style="margin-top: 20px">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" alt="" />
          <div class="userInfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登陆时间<span>2021-11-17</span></p>
          <p>上次登陆地点<span>深圳</span></p>
        </div>
      </el-card>
      <el-card style="margin-top: 20px" shadow="hover">
        <el-table :data="tableData">
          <el-table-column show-overflow-tooltip v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <el-card shadow="hover" v-for="item in countData" :key="item.name"
          :body-style="{ display: 'flex', padding: 0 }">
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
          <div class="detail">
            <p class="num">￥{{ item.value }}</p>
            <p class="txt">￥{{ item.name }}</p>
          </div>
        </el-card>
        <el-card class="fig" shadow="hover" style="height: 280px">
          <echart :chartData="echartData.order" style="height: 280px;"></echart>
        </el-card>
        <div class="graph">
          <el-card shadow="hover" style="height: 280px">
            <echart :chartData="echartData.user" style="height: 240px;"></echart>
          </el-card>
          <el-card class="r" shadow="hover" style="height: 280px">
            <echart :chartData="echartData.video" style="height: 240px;" :isAxisChar="false"></echart>
          </el-card>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import { getHome } from "../../api/data";
  import Echart from "@/components/Echarts.vue"
  export default {
    components:{
      Echart,
    },
    data() {
      return {
        userImg: require("../../assets/images/dog.jpeg"),
        tableData: [],
        tableLabel: {
          name: "厂商",
          todayBuy: "今日购买",
          monthBuy: "每月购买",
          totalBuy: "总购买",
        },
        countData: [
          {
            name: "今日支付订单",
            value: 1234,
            icon: "success",
            color: "#2ec7c9",
          },
          {
            name: "今日收藏订单",
            value: 1234,
            icon: "star-on",
            color: "#2ec7c9",
          },
          {
            name: "本月未支付订单1",
            value: 1234,
            icon: "s-goods",
            color: "#F4B37F",
          },
          {
            name: "本月未支付订单2",
            value: 1234,
            icon: "success",
            color: "#F4B37F",
          },
          {
            name: "今日支付订单3",
            value: 1234,
            icon: "success",
            color: "#2ec7c9",
          },
          {
            name: "今日收藏订单4",
            value: 1234,
            icon: "star-on",
            color: "#2ec7c9",
          },
          {
            name: "本月未支付订单5",
            value: 1234,
            icon: "s-goods",
            color: "#F4B37F",
          },
          {
            name: "本月未支付订单6",
            value: 1234,
            icon: "success",
            color: "#F4B37F",
          },
        ],
        echartData:{
          order:{
            xData:[],
            series:[],
          },
          user:{
            xData:[],
            series:[],
          },
          video:{
            series:[],
          }
        }
      };
    },

    methods: {
      getTableData() {
        getHome().then((res) => {
          console.log(res);
          this.tableData = res.data.tableData;

          const order = res.data.orderData;
          let keyArray = Object.keys(order.data[0]);

          // 折线图
          this.echartData.order.xData = order.date;
          keyArray.forEach((key) => {
            this.echartData.order.series.push({
              name: key,
              data: order.data.map((item) => item[key]),
              type: "line",
            })
          });

          // 柱状图
          this.echartData.user.xData = res.data.userData.map((item) => item.date);
          this.echartData.user.series.push({
            name: '新增用户',
            data: res.data.userData.map((item) => item.new),
            type: 'bar'
          });
          this.echartData.user.series.push({
            name: '活跃用户',
            data: res.data.userData.map((item) => item.active),
            type: 'bar'
          });

          // 饼状图
          this.echartData.video.series.push({
            data:res.data.videoData,
            type: 'pie',
          });

        });
      },
    },

    mounted() {
      this.getTableData();
    },
  };
</script>

<style>
  @import "~@/assets/css/home.css";
</style>

<style>
</style>